<template>
	<view class="become-agent">
		<NavBar title="代理商申请"/>
		<view class="content">
			<view class="info">
				<uni-forms ref="formRef" :rules="rules" :model="agentInfo" labelWidth="0">
					<uni-forms-item name="name">
						<view class="item">
							<view class="label"> 申请人 </view>
							<uni-easyinput class="easy-input" v-model="agentInfo.name" placeholder="请输入申请人真实的姓名" placeholderStyle="color: #D8D8D8;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="mobile">
						<view class="item">
							<view class="label"> 手机号 </view>
							<uni-easyinput class="easy-input" type="number" v-model="agentInfo.mobile" placeholder="请输入正确的手机号" placeholderStyle="color: #D8D8D8;" :input-border="false" :clearable="false" />
						</view>
					</uni-forms-item>
					<uni-forms-item name="site_code">
						<view class="item">
							<view class="label"> 代理区域 </view>
							<view class="value">
								<picker @change="change" mode="multiSelector" :range="cityList" range-key="label" @columnchange="columnchange">
									<view class="site"> {{ site?site:'请选择成为代理商的区域'}}</view>
								</picker>
								<image src="/static/icon/order/right.png" class="right" />
							</view>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="id">
				<view class="title">
					<view class="t-tit"> 上传证件 </view>
				</view>
				<IDBOX @idImg="choosImg"/>
			</view>
			<view class="btn-box">
				<view class="auth">
					<view class="check" :class="isChecked?'checked':''" @tap="isChecked = !isChecked"> </view>
					<view class="xy">我已阅读服务协议<text @tap="goAgree">《代理商服务协议》</text></view>
				</view>
				<view class="btn" @tap="submit"> 提交申请 </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import IDBOX from '@/components/IDBOX.vue'
	import { isNull, isMobile } from '@/utils/valdate.js'
	import { GetRegionApi, uploadImgApi, BecomeAgentApi, GetBecomeAgentApi } from '@/service/index.js'
	const formRef = ref()
	const agentInfo = ref({
		type: 2, // 固定传2
		name: '',
		mobile: '',
		site_code: '', // 代理区域精确到区县
		id_img_1: '', 
		id_img_2: '', 
		id_img_3: '', 
	})
	const site = ref('') // 仅展示选中的区县
	const isChecked = ref(false)
	const rules = {
		name: isNull('姓名'),
		mobile: isMobile(),
		site_code: isNull('代理区域'),
		id_img_1: isNull('身份证正面'),
		id_img_2: isNull('身份证反面'),
		id_img_3: isNull('手持身份证'),
	}
	const cityList = ref([ [], [], [] ])
	// 滑动地址选择器
	const columnchange = (e) => {
		const { detail } = e
		const { column, value } = detail
		if(column === 2) return
		let region = cityList.value[column][value].value
		getRegion(region, column)
	}
	const change = (e) => {
		let arr = []
		e.detail.value.forEach((item, index) => {
			arr.push(cityList.value[index][item].label)
			if(index == 2) [
				agentInfo.value.site_code = cityList.value[index][item].value
			]
		})
		site.value = arr.join(' ')
	}
	const getRegion = (region,index) => {
		GetRegionApi({region}).then(res => {
			cityList.value[index+1] = res
			if(index == 0) {
				GetRegionApi({region: cityList.value[index+1][0].value}).then(sec => {
					cityList.value[index+2] = sec
				})
			}
		})
	}
	const goAgree = () => uni.navigateTo({ url: '/pages/agentPages/becomeAgent/agentAgree/agentAgree' })
	const idObj = ref({
		id_img_1: '',
		id_img_2: '',
		id_img_3: ''
	})
	const choosImg = (obj) => {
		idObj.value = obj
	}
	const submit = () => {
		formRef.value.validate().then(res => {
			if(!isChecked.value) return getApp().globalData.toast('请阅读并同意协议')
			if(idObj.value.id_img_1 ==''||idObj.value.id_img_2 ==''||idObj.value.id_img_3 =='') return getApp().globalData.toast('请上传身份证照片')
			let params = { ...agentInfo.value, ...idObj.value }
			BecomeAgentApi(params).then(res => {
				let navParams = {
					title: '提交成功',
					tips: '您的代理商申请资料提交成功请耐心等待平台审核！',
					submitText: '返回首页'
				}
				uni.navigateTo({
					url: `/pages/auditStatus/auditStatus?title=申请结果&params=${JSON.stringify(navParams)}`
				})
			})
		})
	}
	onLoad(() => {
		GetRegionApi().then(res => {
			cityList.value[0] = res
			GetRegionApi({region: cityList.value[0][0].value}).then(sec => {
				cityList.value[1] = sec
				GetRegionApi({region: sec[0].value}).then(thi => {
					cityList.value[2] = thi
				})
			})
		})
	})
</script>

<style lang="scss" scoped>
	.become-agent {
		padding-bottom: 98px;
		.content {
			padding: 10px 12px;
		}
		.info{
			padding: 0 12px;
			border-radius: 10px;
			background-color: #fff;
			.uni-forms-item {
				margin-bottom: 0;
				align-items: center;
				height: 50px;
				border-bottom: 1px solid #eeeeee;
				box-sizing: border-box;
				.item {
					height: 50px;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					.label {
						color: #333333;
						font-size: 14px;
						font-weight: 400;
						margin-right: 10px;
						position: relative;
						&::before {
							position: absolute;
							top: 0;
							right: -7.5px;
							display: block;
							content: '*';
							color: red;
							font-size: 16px;
						}
					}
					.value {
						flex: 1;
						display: flex;
						margin-left: 10px;
						padding-right: 10px;
						align-items: center;
						justify-content: end;
						.site {
							color: #D8D8D8;
							font-size: 14px;
							font-weight: 400;
						}
						.right {
							width: 14px;
							height: 14px;
							margin-left: 5px;
						}
					}
					.easy-input {
						flex: 1;
						color: #D8D8D8;
						font-size: 14px;
						font-weight: 400;
						text-align: right;
						margin-left: 10px;
					}
				}
			}
			:deep(.uni-forms-item__error) {
				left: 0;
				top: 100%;
				right: 12px;
				font-size: 12px;
				text-align: right;
				padding-bottom: 3px;
				transform: translateY(-100%);
			}
		}
		.id {
			margin-top: 10px;
			padding: 0px 12px 10px;
			border-radius: 10px;
			background-color: #fff;
			.title {
				line-height: 50px;
				border-bottom: 1px solid #eee;
				box-sizing: border-box;
				.t-tit {
					width: 56px;
					color: #333333;
					font-size: 14px;
					font-weight: 400;
					margin-right: 10px;
					position: relative;
					&::before {
						position: absolute;
						top: 0;
						right: -7.5px;
						display: block;
						content: '*';
						color: red;
						font-size: 16px;
					}
				}
			}
		}
		.btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 98px;
			padding: 12px 12px 0;
			background-color: #fff;
			box-sizing: border-box;
			.auth {
				display: flex;
				align-items: center;
				.check {
					width: 16px;
					height: 16px;
					background: url('/static/icon/shop/check.png') no-repeat center center;
					background-size: 100% 100%;
					&.checked {
						background: url('/static/icon/shop/checked.png') no-repeat center center;
						background-size: 100% 100%;
					}
				}
				.xy {
					color: #999999;
					font-size: 13px;
					font-weight: 400;
					margin-left: 6px;
					line-height: 18px;
					text {
						color: #FF3B1E;
					}
				}
			}
			.btn {
				height: 50px;
				color: #FFFFFF;
				font-size: 17px;
				margin-top: 10px;
				font-weight: 500;
				line-height: 50px;
				text-align: center;
				background: #FF3B1E;
				border-radius: 106px;
			}
		}
	}
</style>